<template>
  <base-layout>
    <div class="course-detail">
      <a-card :bordered="false">
        <template #title>
          <div class="card-title">
            <a-button @click="handleBack">
              <template #icon><arrow-left-outlined /></template>
              返回
            </a-button>
            <span class="title-text">课程详情</span>
          </div>
        </template>

        <!-- 基本信息卡片 -->
        <a-descriptions title="基本信息" bordered>
          <a-descriptions-item label="课程名称">{{ courseInfo.name }}</a-descriptions-item>
          <a-descriptions-item label="课程代码">{{ courseInfo.code }}</a-descriptions-item>
          <a-descriptions-item label="学期">{{ courseInfo.semester }}</a-descriptions-item>
          <a-descriptions-item label="课程类型">{{ getTypeText(courseInfo.type) }}</a-descriptions-item>
          <a-descriptions-item label="学分">{{ courseInfo.credit }}</a-descriptions-item>
          <a-descriptions-item label="课程容量">{{ courseInfo.capacity }}人</a-descriptions-item>
          <a-descriptions-item label="上课时间">
            {{ getScheduleText(courseInfo.schedule) }} {{ courseInfo.time }}
          </a-descriptions-item>
          <a-descriptions-item label="已选人数">{{ courseInfo.selectedCount }}人</a-descriptions-item>
          <a-descriptions-item label="创建时间">{{ courseInfo.createTime }}</a-descriptions-item>
          <a-descriptions-item label="课程简介" :span="3">{{ courseInfo.description }}</a-descriptions-item>
        </a-descriptions>

        <!-- 学生列表 -->
        <div class="section-title">选课学生</div>
        <div class="table-actions">
          <a-input-search
            v-model:value="searchText"
            placeholder="搜索学生姓名/学号"
            style="width: 300px"
            @search="onSearch"
          />
        </div>
        <a-table
          :columns="columns"
          :data-source="students"
          :loading="loading"
          :pagination="pagination"
          @change="handleTableChange"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="getStatusColor(record.status)">
                {{ getStatusText(record.status) }}
              </a-tag>
            </template>
            <template v-if="column.key === 'action'">
              <a-space>
                <a @click="handleViewStudent(record)">查看</a>
              </a-space>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </base-layout>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import { useRouter, useRoute } from 'vue-router'
import { ArrowLeftOutlined } from '@ant-design/icons-vue'
import BaseLayout from '@/components/layout/BaseLayout.vue'

const router = useRouter()
const route = useRoute()
const loading = ref(false)
const searchText = ref('')

// 课程信息
const courseInfo = reactive({
  name: '',
  code: '',
  semester: '',
  type: '',
  credit: 0,
  capacity: 0,
  schedule: [],
  time: '',
  selectedCount: 0,
  createTime: '',
  description: ''
})

// 表格列定义
const columns = [
  {
    title: '学号',
    dataIndex: 'studentId',
    key: 'studentId',
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '班级',
    dataIndex: 'class',
    key: 'class',
  },
  {
    title: '选课状态',
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '选课时间',
    dataIndex: 'selectTime',
    key: 'selectTime',
  },
  {
    title: '操作',
    key: 'action',
    width: 120,
  }
]

const students = ref([])
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
  showTotal: total => `共 ${total} 条记录`
})

// 获取课程详细信息
const fetchCourseDetail = async (id) => {
  try {
    // 模拟API调用
    const mockData = {
      name: '软件工程实践',
      code: 'SE001',
      semester: '2024春季学期',
      type: 'required',
      credit: 3,
      capacity: 60,
      schedule: ['monday', 'wednesday'],
      time: '08:00-09:40',
      selectedCount: 45,
      createTime: '2024-02-20',
      description: '这是一门软件工程实践课程，旨在培养学生的实践能力。'
    }
    Object.assign(courseInfo, mockData)
  } catch (error) {
    message.error('获取课程信息失败')
  }
}

// 获取选课学生列表
const fetchStudents = async () => {
  loading.value = true
  try {
    // 模拟API调用
    const mockData = [
      {
        key: '1',
        studentId: '2023001',
        name: '张三',
        class: '软件工程2班',
        status: 'normal',
        selectTime: '2024-02-21 10:00:00'
      },
      {
        key: '2',
        studentId: '2023002',
        name: '李四',
        class: '软件工程1班',
        status: 'pending',
        selectTime: '2024-02-21 10:30:00'
      }
    ]
    students.value = mockData
    pagination.total = mockData.length
  } catch (error) {
    message.error('获取学生列表失败')
  } finally {
    loading.value = false
  }
}

const getTypeText = (type) => {
  const typeMap = {
    required: '必修课',
    elective: '选修课',
    practice: '实践课'
  }
  return typeMap[type] || type
}

const getScheduleText = (schedule) => {
  const dayMap = {
    monday: '周一',
    tuesday: '周二',
    wednesday: '周三',
    thursday: '周四',
    friday: '周五'
  }
  return schedule.map(day => dayMap[day]).join('、')
}

const getStatusColor = (status) => {
  const colorMap = {
    normal: 'success',
    pending: 'warning',
    rejected: 'error'
  }
  return colorMap[status] || 'default'
}

const getStatusText = (status) => {
  const textMap = {
    normal: '已确认',
    pending: '待确认',
    rejected: '已退课'
  }
  return textMap[status] || status
}

const handleBack = () => {
  router.push('/course-manage')
}

const handleViewStudent = (record) => {
  // TODO: 跳转到学生详情页面
  console.log('查看学生:', record)
}

const onSearch = (value) => {
  searchText.value = value
  pagination.current = 1
  fetchStudents()
}

const handleTableChange = (pag) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  fetchStudents()
}

onMounted(() => {
  const courseId = route.params.id
  if (courseId) {
    fetchCourseDetail(courseId)
    fetchStudents()
  } else {
    message.error('课程ID不存在')
    router.push('/course-manage')
  }
})
</script>

<style scoped>
.course-detail {
  padding: 24px;
  background: #f0f2f5;
  min-height: 100vh;
}

.card-title {
  display: flex;
  align-items: center;
  gap: 16px;
}

.title-text {
  font-size: 16px;
  font-weight: 500;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  margin: 24px 0 16px;
  color: rgba(0, 0, 0, 0.85);
}

.table-actions {
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
}

:deep(.ant-descriptions) {
  background: #fff;
  padding: 24px;
  border-radius: 2px;
}

:deep(.ant-descriptions-title) {
  font-size: 16px;
  font-weight: 500;
}

:deep(.ant-descriptions-item-label) {
  width: 120px;
  font-weight: 500;
}
</style> 